<!--
 * @Descripttion: 项目详情
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-10-24 11:45:32
 * @LastEditors: GW
 * @LastEditTime: 2021-10-27 18:49:04
-->
<!--
 * @Descripttion: 项目管理
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-10-24 11:10:55
 * @LastEditors: GW
 * @LastEditTime: 2021-10-24 17:02:47
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="big-main-wrapper project-details-wrp" style="margin:2px 8px;">
            <a-tabs :activeKey="activeKey" @change="callbackActive">
                <a-tab-pane :key="1" tab="项目概览">
                    <div class="overview-wrapper">
                        <a-row :span="24">
                            <a-col span="8">
                                <a-card size="small" :loading="loadingCard1" v-if="projectData">
                                    <template slot="title">
                                        <span class="project-name">{{projectData.name}}</span>
                                    </template>
                                    <div class="responsible-box">
                                        <div class="pic">
                                            <a-icon type="user" />
                                        </div>
                                        <div class="pic-user">
                                            <div>{{projectData.liablePersonNames}}</div>
                                            <span>项目负责人</span>
                                        </div>
                                    </div>
                                    <ul class="status-box">
                                        <li>未开始：{{projectData.notWorkNumber?projectData.notWorkNumber:0}}</li>
                                        <li>进行中：{{projectData.startWorkNumber?projectData.startWorkNumber:0}}</li>
                                        <li>已完成：{{projectData.endWorkNumber?projectData.endWorkNumber:0}}</li>
                                    </ul>
                                    <div class="plan-cycle">
                                        <a-icon type="calendar" />
                                        项目计划周期：{{projectData.planBeginDate}} ~ {{projectData.planEndDate}}
                                    </div>
                                    <div class="progress-box">
                                        <a-icon type="hourglass" />
                                        项目进度:
                                        <a-progress :percent="30" />
                                    </div>
                                </a-card>
                            </a-col>
                        </a-row>
                    </div>

                </a-tab-pane>
                <a-tab-pane :key="2" tab="里程碑">
                    <div class="milestone-wrapper">
                        <div class="btn-wrapper clearfix">
                            <a-row :span="24" class="text-center clearfix">
                                <a-col :span="2">
                                    <div class="title">全部里程碑</div>
                                    <p class="total">共{{milestoneData.length}}条</p>
                                </a-col>

                                <a-col :span="12" :push="10">
                                    <a-col :span="3" :push="21">
                                        <div class="btns" @click="addMilestone(1)">
                                            <a-icon class="btns-icon" type="plus" />
                                            <div class="btns-text">新建里程牌</div>
                                        </div>
                                    </a-col>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="progress-box">
                            <div class="percent-box">里程碑时间抽{{finishPercent}}%</div>
                            <div class="time-box">
                                <a-steps :current="100">
                                    <a-popover slot="progressDot" slot-scope="{ index, status, prefixCls }">
                                        <template slot="content">
                                            <span>里程碑: {{ index + 1 }}</span>
                                        </template>
                                        <span :class="`${prefixCls}-icon-dot`" />
                                    </a-popover>
                                    <a-step v-for="item in milestoneData" :class="item.status == 2? 'complete-class' :'' " :subTitle="item.status==0?'未完成':item.status==2?'已完成':''" :key="item" :title="item.name" :description="item.endDate">
                                        <!-- <template slot="icon">
                                            <a-icon v-if="item.status == 2" style="color:#52c41a" type="check-circle" />
                                            <a-icon v-else type="clock-circle" />
                                        </template> -->
                                    </a-step>
                                </a-steps>
                            </div>

                        </div>
                        <div class="table-box">
                            <a-table :columns="columns" :data-source="milestoneData" bordered>
                                <template slot="operation" slot-scope="text,record,index">
                                    <a-icon @click="addMilestone(2,record)" style="color:#1890ff;cursor:pointer;display:block" type="form" />
                                </template>
                            </a-table>
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane :key="3" tab="计划与进度">
                    <div class="plan-wrapper">
                        <div class="btn-wrapper clearfix">
                            <a-row :span="24" class="text-center clearfix">
                                <a-col :span="2">
                                    <div class="title">全部计划</div>
                                    <p class="total">共{{milestoneData.length}}条</p>
                                </a-col>

                                <a-col :span="12" :push="10">
                                    <a-col :span="3" :push="21">
                                        <div class="btns" @click="addPlan(1)">
                                            <a-icon class="btns-icon" type="plus" />
                                            <div class="btns-text">新建计划</div>
                                        </div>
                                    </a-col>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="plan-table-box">
                            <a-row :span="24">
                                <a-col :span="24">
                                    <gantt ref="ganttDom" class="left-container" :tasks="tasks" @edit="addPlan"></gantt>
                                </a-col>
                            </a-row>

                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane :key="4" tab="任务">
                    <div class="plan-wrapper">
                        <div class="btn-wrapper clearfix">
                            <a-row :span="24" class="text-center clearfix">
                                <a-col :span="2">
                                    <div class="title">全部任务</div>
                                    <p class="total">共{{taskData.length}}条</p>
                                </a-col>

                                <a-col :span="12" :push="10">
                                    <a-col :span="3" :push="21">
                                        <div class="btns" @click="addTask(1)">
                                            <a-icon class="btns-icon" type="plus" />
                                            <div class="btns-text">新建任务</div>
                                        </div>
                                    </a-col>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="plan-table-box" style="min-height:220px;">
                            <a-row :span="24">
                                <a-col :span="24">
                                    <a-table :columns="columnsTask" :data-source="taskData" bordered>
                                        <template slot="operation" slot-scope="text,record,index">
                                            <a-icon @click="addTask(2,record)" style="color:#1890ff;cursor:pointer;display:block" type="form" />
                                        </template>
                                    </a-table>
                                </a-col>
                            </a-row>

                        </div>
                    </div>
                </a-tab-pane>
            </a-tabs>

        </div>
        <!--新增里程碑-->
        <a-modal v-model="visible" :title="modalTitle" @cancel="()=>{visible = false}" class="phase-box" :width="800">
            <a-form-model :label-col="{span:8}" :wrapper-col="{span:14}">
                <a-row :span="24">
                    <a-col :span="12">
                        <a-form-model-item label="标题" :rules="[{ required: true,trigger:'input'}]">
                            <a-input placeholder="请输入标题" v-model="requestData.name" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="负责人" :rules="[{ required: true,trigger:'input'}]">
                            <a-input-search read-only placeholder="请选择负责人" v-model="requestData.personLiableNames" @click="handleSearch" @search="handleSearch" />
                            <multi-select ref="headRef" @clickItem="setValue"></multi-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="完成日期" :rules="[{ required: true,trigger:'input'}]">
                            <a-date-picker style="width:220px;" placeholder="请选择完成时间" v-model="requestData.endDate" @change="((date,dateString)=>{onChangeTime(date,dateString,)})" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="状态">
                            <a-select :default-value="0" v-model="requestData.status">
                                <a-select-option :value="0">未完成</a-select-option>
                                <a-select-option :value="2">已完成</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="submitRequest(2)">
                    确认
                </a-button>
                <a-button @click="()=>{visible = false}">
                    取消
                </a-button>
            </template>
        </a-modal>

        <!--新增计划-->
        <a-modal v-model="visiblePlan" :title="modalTitlePlan" @cancel="()=>{visiblePlan = false}" class="phase-box" :width="800">
            <a-form-model :label-col="{span:8}" :wrapper-col="{span:14}" v-if="requestDataPlan">
                <a-row :span="24">
                    <a-col :span="12">
                        <a-form-model-item label="标题" :rules="[{ required: true,trigger:'input'}]">
                            <a-input placeholder="请输入标题" v-model="requestDataPlan.name" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="负责人" :rules="[{ required: true,trigger:'input'}]">
                            <a-input-search read-only placeholder="请选择负责人" v-model="requestDataPlan.personLiableNames" @click="handleSearch" @search="handleSearch" />
                            <multi-select ref="headRef" @clickItem="setValue"></multi-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="开始日期" :rules="[{ required: true,trigger:'input'}]">
                            <a-date-picker style="width:220px;" placeholder="请选择开始时间" v-model="requestDataPlan.beginDate" @change="((date,dateString)=>{onChangeTime(date,dateString,'planBeginDate')})" />
                        </a-form-model-item>
                    </a-col>

                    <a-col :span="12">
                        <a-form-model-item label="完成日期" :rules="[{ required: true,trigger:'input'}]">
                            <a-date-picker style="width:220px;" placeholder="请选择完成时间" v-model="requestDataPlan.endDate" @change="((date,dateString)=>{onChangeTime(date,dateString,'planEndDate')})" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="状态">
                            <a-select :default-value="0" v-model="requestDataPlan.status">
                                <a-select-option :value="0">未完成</a-select-option>
                                <a-select-option :value="2">已完成</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="submitRequest(1)">
                    确认
                </a-button>
                <a-button @click="()=>{visiblePlan = false}">
                    取消
                </a-button>
            </template>
        </a-modal>

        <!--新增任务-->
        <a-modal v-model="visibleTask" :title="modalTitleTask" @cancel="()=>{visibleTask = false}" class="phase-box" :width="800">
            <a-form-model :label-col="{span:8}" :wrapper-col="{span:14}" v-if="requestDataTask">
                <a-row :span="24">
                    <a-col :span="12">
                        <a-form-model-item label="标题" :rules="[{ required: true,trigger:'input'}]">
                            <a-input placeholder="请输入标题" v-model="requestDataTask.title" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="负责人" :rules="[{ required: true,trigger:'input'}]">
                            <a-input-search read-only placeholder="请选择负责人" v-model="requestDataTask.userName" @click="handleSearch" @search="handleSearch" />
                            <multi-select ref="headRef" @clickItem="setValue"></multi-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="开始日期" :rules="[{ required: true,trigger:'input'}]">
                            <a-date-picker style="width:220px;" placeholder="请选择开始时间" v-model="requestDataTask.beginDate" @change="((date,dateString)=>{onChangeTime(date,dateString,'planBeginDate')})" />
                        </a-form-model-item>
                    </a-col>

                    <a-col :span="12">
                        <a-form-model-item label="完成日期" :rules="[{ required: true,trigger:'input'}]">
                            <a-date-picker style="width:220px;" placeholder="请选择完成时间" v-model="requestDataTask.endDate" @change="((date,dateString)=>{onChangeTime(date,dateString,'planEndDate')})" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="状态">
                            <a-select :default-value="0" v-model="requestDataTask.status">
                                <a-select-option :value="0">未完成</a-select-option>
                                <a-select-option :value="2">已完成</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="关联计划" :rules="[{ required: true,trigger:'input'}]">
                            <a-select v-model="requestDataTask.planId" @change="planChange">
                                <a-select-option v-for="item in planDataAll" :key="item" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="submitRequestTask()">
                    确认
                </a-button>
                <a-button @click="()=>{visibleTask = false}">
                    取消
                </a-button>
            </template>
        </a-modal>

    </div>
</template>
<script>

import { mapState } from "vuex";
import { list, remove, save, detailsById, listTask, saveTask, removeTask } from "@/api/project/projectDetails";
import multiSelect from "./components/multiSelect"
import Gantt from '@/components/gantt/gantt';
export default {
    components: {
        multiSelect,
        'v-chart': VueECharts,
        Gantt
    },
    data () {
        return {
            tasks: {
                data: [
                    // {
                    //     id: 1,
                    //     open: true,
                    //     start_date: "06-11-2020",
                    //     end_date: "25-11-2020",
                    //     status: 0,
                    //     text: "vue Gantt Widget",
                    //     progress: 0.6,
                    //     type: 1,
                    // },
                    // {
                    //     id: 2,
                    //     start_date: "06-11-2020",
                    //     end_date: "06-12-2020",
                    //     status: 0,
                    //     text: "Lib-Gantt",
                    //     progress: 0.1,
                    //     type: 2,
                    // },
                ],
                links: [
                    {
                        source: "20",
                        target: "21",
                        type: "0"
                    }
                ]
            },
            loadingCard1: true,
            loadingCard2: true,
            loadingCard3: true,
            projectId: this.$route.query.id,//项目id
            projectData: {},
            visible: false,
            modalTitle: '',//弹窗标题
            milestoneData: [],//里程碑数据

            visiblePlan: false,
            modalTitlePlan: '',//弹窗标题
            planData: [],//计划 和 里程碑数据

            visibleTask: false,
            modalTitleTask: '',//弹窗标题
            taskData: [],//任务



            activeKey: 1,
            columns: [{
                title: '序号',
                dataIndex: '',
                align: 'center',
                width: 40,
                customRender: (text, record, index) => {
                    return index + 1;
                }
            }, {
                title: '里程碑名称',
                dataIndex: 'name',
            }, {
                title: '状态',
                dataIndex: 'status',
                customRender: (text, record, index) => {
                    return text == 0 || text == null ? '未完成' : text == 2 ? '已完成' : '';
                }
            }, {
                title: '负责人',
                dataIndex: 'personLiableNames',
            }, {
                title: '完成日期',
                dataIndex: 'endDate',
            }, {
                title: '交付物',
                dataIndex: 'number',
            }, {
                title: '操作',
                dataIndex: 'operation',
                align: 'center',
                width: 60,
                scopedSlots: { customRender: 'operation' }
            }],

            columnsTask: [{
                title: '序号',
                dataIndex: '',
                align: 'center',
                width: 40,
                customRender: (text, record, index) => {
                    return index + 1;
                }
            }, {
                title: '任务名称',
                dataIndex: 'title',
            }, {
                title: '状态',
                dataIndex: 'status',
                customRender: (text, record, index) => {
                    return text == 0 || text == null ? '未完成' : text == 2 ? '已完成' : '';
                }
            }, {
                title: '负责人',
                dataIndex: 'userName',
            }, {
                title: '关联计划',
                dataIndex: 'planName',
            }, {
                title: '开始日期',
                dataIndex: 'beginDate',
            }, {
                title: '完成日期',
                dataIndex: 'endDate',
            }, {
                title: '操作',
                dataIndex: 'operation',
                align: 'center',
                width: 60,
                scopedSlots: { customRender: 'operation' }
            }],

            requestData: {
                name: '',
                status: 0,
                personLiableNames: '',
                personLiableIds: '',
            },
            requestDataPlan: {
                name: '',
                status: 0,
                personLiableNames: '',
                personLiableIds: '',
            },
            requestDataTask: {
                name: '',
                status: 0,
                userName: '',
                userId: '',
            },
            finishPercent: 0,//完成百分比
            planDataAll: [],
        };
    },
    created () {
        this.getDataById();//获取某个项目详情
        let x = this.getDateStr('2020-10-1', '2021-10-10', 0);
        this.getData(2);//获取里程碑数据
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    activated () {
        this.projectId = this.$route.query.id;//项目id
        this.activeKey = 1;
    },
    mounted () {

    },
    methods: {
        callbackActive (t) {
            this.activeKey = t;
            if (t == 2) {
                this.getData(2);//获取里程碑
            }
            if (t == 3) {
                this.getData();//获取里程碑和计划
            }
            if (t == 4) {
                this.getPlanListData();
                this.getDataTask();//获取任务数据
            }
        },
        getDataById () {
            // 获取项目数据
            detailsById({ id: this.projectId }).then(res => {
                if (res.code == 200) {
                    this.projectData = res.data;
                    this.loadingCard1 = false;
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        addMilestone (type, record) {
            //新增 or 修改 里程碑
            if (type == 1) {
                this.modalTitle = '新建里程牌';
                this.requestData = {
                    name: '',
                    status: 0,
                    // beginDate: null,
                    endDate: null,
                    personLiableNames: '',
                    personLiableIds: '',
                };

                this.visible = true;
            } else {
                this.requestData = _.cloneDeep(record);
                this.$nextTick(() => {
                    this.modalTitle = '修改里程牌';
                    this.visible = true;
                })
            }
        },
        addPlan (array) {
            //新增 or 修改 计划
            if (array == 1) {
                this.modalTitlePlan = '新建计划';
                this.requestDataPlan = {
                    name: '',
                    status: 0,
                    beginDate: null,
                    endDate: null,
                    personLiableNames: '',
                    personLiableIds: '',
                };
                this.visiblePlan = true;
            } else {
                console.log(array);
                this.planData.forEach(item => {
                    if (item.id == array[0]) {
                        this.requestDataPlan = _.cloneDeep(item);
                        this.$nextTick(() => {
                            this.modalTitlePlan = '修改计划';
                            this.visiblePlan = true;
                        })
                    }
                });
            }
        },
        getData (type) {
            // 获取数据
            //type 1:计划 2：里程碑
            list({ projectId: this.projectId, type: type }).then(res => {
                if (res.code == 200) {
                    let finishNum = 0;
                    if (JSON.stringify(res.data) != '[]') {
                        if (res.data.length > 0) {
                            this.milestoneData = res.data.map(r => {
                                return { ...r, key: r.id }
                            })
                            this.milestoneData.forEach(item => {
                                if (item.status == 2) {
                                    finishNum++;
                                }
                            });
                            this.finishPercent = (finishNum / this.milestoneData.length * 100).toFixed(2);

                            //处理甘特图 特定数据
                            if (!type) {
                                //     start_date: "06-11-2020",
                                //     end_date: "25-11-2020",
                                //     status: 0,
                                //     text: "vue Gantt Widget",
                                //     progress: 0.6,
                                //     type: 1,
                                this.planData = res.data;
                                let data = res.data;
                                data.forEach(item => {
                                    if (item.beginDate != null) {
                                        console.log("开始日期",item.beginDate.split('-').reverse().join('-'));
                                        item.start_date = item.beginDate.split('-').reverse().join('-');
                                    }
                                    if (item.endDate != null) {
                                        console.log("结束日期",item.endDate.split('-').reverse().join('-'));
                                        item.end_date = item.endDate.split('-').reverse().join('-');
                                    }
                                    item.text = item.name;
                                    item.progress = item.progressRate;//进度
                                    item.type_name = _.clone(item.type);
                                    // if(item.type == 1){
                                    //     item.type = gantt.config.types.milestone
                                    // }
                                });
                                this.tasks.data = data;
                                console.log('转化甘特数据：',data);
                                this.$nextTick(() => {
                                    this.$refs.ganttDom.ansyFun();
                                })
                            }
                        }
                    } else {
                        this.milestoneData = [];
                        if (!type) {
                            this.tasks.data = [];
                            this.$nextTick(() => {
                                console.log(this.$refs.ganttDom);
                                this.$refs.ganttDom.ansyFun();
                            })
                        }
                    }

                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        remove () {
            let that = this;
            this.$confirm({
                title: `是否确认删除 ${that.selectedRows[0].name}`,
                content: "",
                onOk () {
                    remove([that.selectedKeys.join(',')]).then(res => {
                        if (res.code == 200) {
                            that.selectedKeys = [];
                            that.selectedRows = [];
                            that.$message.success("删除成功");
                            that.getData(2);
                        } else {
                            that.$message.warning(res.message);
                        }
                    })
                },
                onCancel () { }
            });
        },
        submitRequest (type) {
            //type 1: 计划 2：里程碑
            let requestData = type == 1 ? this.requestDataPlan : type == 2 ? this.requestData : '';
            requestData.type = type;
            requestData.projectId = this.projectId;
            requestData.createDate = null;
            console.log(requestData);
            if (!requestData.name) {
                this.$message.warning('请输入标题');
                return;
            }
            if (!requestData.personLiableNames) {
                this.$message.warning('请选择负责人');
                return;
            }

            if (type == 1) {
                if (!requestData.beginDate) {
                    this.$message.warning('请选择开始日期');
                    return;
                }
            } 

            if (!requestData.endDate) {
                this.$message.warning('请选择完成日期');
                return;
            }
            if(type == 2){
              requestData.beginDate = requestData.endDate;
            }
            if (requestData.status == 2) {
                requestData.progressRate = 1;
            }

            save(requestData).then(res => {
                if (res.code == 200) {
                    this.$message.success("保存成功");
                    this.visible = false;
                    this.visiblePlan = false;
                    if (type == 2) {
                        this.getData(2);
                    } else {
                        this.getData();
                    }
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        handleSearch () {
            console.log(this.$refs.headRef)
            this.$refs.headRef.showModal();
        },
        setValue (data) {
            console.log('valvalvalvalval:', data)
            let name = [];
            let id = [];
            data.forEach(item => {
                name.push(item.name);
                id.push(item.id);
            });
            this.requestData.personLiableNames = name.join(',');
            this.requestData.personLiableIds = id.join(',');

            this.requestDataPlan.personLiableNames = name.join(',');
            this.requestDataPlan.personLiableIds = id.join(',');

            if (this.activeKey == 4) {
                this.requestDataTask.userName = name.join(',');
                this.requestDataTask.userId = id.join(',');
            }

            console.log('负责人ids:', id, '负责人names:', name)
        },
        onChangeTime (d, string, code) {
            //时间处理string
            console.log(d, string, code)
            if (code == 'planBeginDate') {
                this.requestDataPlan.beginDate = string;
            } else if (code == 'planEndDate') {
                this.requestDataPlan.endDate = string;
            } else {
                this.requestData.endDate = string;
            }
        },
        getDateStr (startDate, endDate, dayLength) {
            var str = startDate;
            for (var i = 0; ; i++) {
                var getDate = this.getTargetDate(startDate, dayLength);
                startDate = getDate;
                if (getDate <= endDate) {
                    str += ',' + getDate;
                } else {
                    break;
                }
            }
            // console.log(str);
            return str;
        },
        // startDate: 开始时间；dayLength：每隔几天，0-代表获取每天，1-代表日期间隔一天
        getTargetDate (date, dayLength) {
            dayLength = dayLength + 1;
            var tempDate = new Date(date);
            tempDate.setDate(tempDate.getDate() + dayLength);
            var year = tempDate.getFullYear();
            var month = tempDate.getMonth() + 1 < 10 ? "0" + (tempDate.getMonth() + 1) : tempDate.getMonth() + 1;
            var day = tempDate.getDate() < 10 ? "0" + tempDate.getDate() : tempDate.getDate();
            return year + "-" + month + "-" + day;
        },









        planChange (key, val) {
            this.requestDataTask.planId = key;
            this.requestDataTask.planName = val.key.name;
        },
        //获取计划列表
        getPlanListData () {
            list({ projectId: this.projectId, type: 1 }).then(res => {
                if (res.code == 200) {
                    this.planDataAll = res.data;
                }
            })
        },
        //任务
        addTask (type, record) {
            //新增 or 修改 任务
            if (type == 1) {
                this.modalTitleTask = '新建任务';
                console.log(this.planData, this.planData[0])
                this.requestDataTask = {
                    title: '',
                    status: 0,
                    beginDate: null,
                    endDate: null,
                    personLiableNames: '',
                    personLiableIds: '',
                    planId: this.planDataAll[0].id,
                    planName: this.planDataAll[0].name,
                };
                this.visibleTask = true;
            } else {
                this.taskData.forEach(item => {
                    if (item.id == record.id) {
                        this.requestDataTask = _.cloneDeep(item);
                        this.$nextTick(() => {
                            this.modalTitleTask = '修改任务';
                            this.visibleTask = true;
                        })
                    }
                });
            }
        },
        getDataTask () {
            // 获取数据
            listTask({ projectId: this.projectId }).then(res => {
                if (res.code == 200) {
                    if (JSON.stringify(res.data) != '[]') {
                        if (res.data.length > 0) {
                            this.taskData = res.data.map(r => {
                                return { ...r, key: r.id }
                            })

                            console.log('计划数据：', this.planData)
                        }
                    }
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        removeTask () {
            let that = this;
            this.$confirm({
                title: `是否确认删除 ${that.selectedRows[0].name}`,
                content: "",
                onOk () {
                    removeTask([that.selectedKeys.join(',')]).then(res => {
                        if (res.code == 200) {
                            that.selectedKeys = [];
                            that.selectedRows = [];
                            that.$message.success("删除成功");
                            that.getDataTask();
                        } else {
                            that.$message.warning(res.message);
                        }
                    })
                },
                onCancel () { }
            });
        },
        submitRequestTask () {
            //type 1: 计划 2：里程碑
            let requestData = this.requestDataTask;
            requestData.projectId = this.projectId;
            requestData.createDate = null;
            requestData.updateDate = null;
            console.log(requestData);
            if (!requestData.title) {
                this.$message.warning('请输入任务标题');
                return;
            }
            if (!requestData.userName) {
                this.$message.warning('请选择负责人');
                return;
            }
            if (!requestData.planId) {
                this.$message.warning('请选择计划');
                return;
            }

            if (!requestData.beginDate) {
                this.$message.warning('请选择开始日期');
                return;
            }

            if (!requestData.endDate) {
                this.$message.warning('请选择完成日期');
                return;
            }
            saveTask(requestData).then(res => {
                if (res.code == 200) {
                    this.$message.success("保存成功");
                    this.visibleTask = false;
                    this.getDataTask();
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },

    },
};
</script>
<style lang="less">
    @import '~@/style/setting/inventory.less';
    .project-details-wrp {
        .overview-wrapper,
        .plan-wrapper {
            padding: 8px;
        }

        .overview-wrapper {
            .project-name {
                font-weight: bold;
                font-size: 18px;
            }
            .responsible-box {
                margin: 20px 0px;
                width: 160px;
                display: flex;
                border-radius: 20px;
                cursor: pointer;
                .pic {
                    flex: 0 0 40px;
                    width: 40px;
                    height: 40px;
                    font-size: 24px;
                    text-align: center;
                    line-height: 40px;
                    background: rgb(8, 184, 238);
                    border-radius: 50%;
                }
                .pic-user {
                    padding-left: 10px;
                    flex: 1;
                }
            }
            .responsible-box:hover {
                background: rgb(155, 191, 229);
                .pic-user {
                    color: #fff;
                }
            }
            .status-box {
                margin: 20px 0px;
                display: flex;
                li {
                    flex: 1;
                    list-style: none;
                }
            }
            .plan-cycle {
                margin: 20px 0px;
            }
            .progress-box {
                margin: 20px 0px;
            }
        }

        .milestone-wrapper {
            .title {
                font-size: 18px;
                letter-spacing: 2px;
                font-family: '微软雅黑';
            }
            .total {
                font-size: 12px;
            }
            .progress-box {
                .percent-box {
                    margin: 20px 0 0 10px;
                }
                .time-box {
                    min-height: 100px;
                    .ant-steps {
                        padding-top: 2px;
                    }
                    margin-top: 50px;
                    overflow-x: auto;
                }
            }
            .table-box {
                margin-top: 20px;
                min-height: 300px;
            }
        }

        .plan-table-box {
            margin-top: 20px;
        }
    }
    .table-wrapper-box {
        height: calc(100% - 45px);
        overflow-y: auto;
    }
    .phase-box {
        .ant-form-item {
            margin-bottom: 0px;
        }
    }
    .complete-class {
        .ant-steps-item-content {
            .ant-steps-item-description,
            .ant-steps-item-subtitle {
                color: #52c41a !important;
            }
        }
    }
    .left-container {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 400px;
    }
</style>